<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		svg{border: 1px solid #333;}
	</style>
</head>
<body>
	<svg width="600" height="400">

		
		<defs>
			<!-- 线性渐变 -->
			<linearGradient id="grad1" x1="0" y1="0" x2="0" y2="1">
				<stop offset="0%" stop-color="red"></stop>
				<stop offset="50%" stop-color="yellow"></stop>
				<stop offset="100%" stop-color="blue"></stop>
			</linearGradient>

			<!-- 径向渐变 -->
			<radialGradient id="grad2" fx="0.5" fy="0.5" fr="0.3" cx="0.5" cy="0.5" r="0.5">
				<stop offset="0%" stop-color="red"></stop>
				<stop offset="50%" stop-color="yellow"></stop>
				<stop offset="100%" stop-color="blue"></stop>
			</radialGradient>

		</defs>	

		<!-- 使用线性渐变 -->
		<rect x="100" y="100" width="100" height="100" fill="url(#grad1)"></rect>

		<!-- 使用径向渐变 -->
 		<!-- <circle cx="300" cy="200" r="200" fill="url(#grad2)"></circle>	 -->

	</svg>

</body>
</html>